<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>

        <div class="grandFather">DIV
            <p class="father">P
                <a href="#" class="son">A</a>
            </p>
        </div>
    <script>
        /*
            事件流：
            三个阶段
                1.捕获阶段
                2.目标阶段
                3.冒泡阶段
            注意：onclick 默认冒泡  没法更改
            addEventListener('事件名称',事件函数,是否冒泡传递(布尔型))
            默认为冒泡方式false(从里到外)  true为事件捕获(从外到里)
        */ 

        var gf=document.querySelector('.grandFather');
        var father=document.querySelector(".father");
        var son=document.querySelector(".son");

        //这里的是元素对象绑定  用的触发事件名称为 onclick  而onclick默认为冒泡
        gf.onclick=function()
        {
            alert("这是div")
        }
        father.onclick=function()
        {
            alert("这是p")
        }
        son.onclick=function()
        {
            alert("这是a")
        }

        //捕获阶段
        // gf.addEventListener('click',function(){
        //     alert("DIV的点击事件")
        // },true)
        // father.addEventListener('click',function(){
        //     alert("father的点击事件")
        // },true)
        // son.addEventListener('click',function(){
        //     alert("son的点击事件")
        // },true)

        // //冒泡阶段
        // gf.addEventListener('click',function(){
        //     alert("DIV的点击事件")
        // },false)
        // father.addEventListener('click',function(){
        //     alert("father的点击事件")
        // },false)
        // son.addEventListener('click',function(){
        //     alert("son的点击事件")
        // },false)
        
    </script>
    
</body>
</html>